<template>
  <div class="app-container">
    <h2 class="con-title">运费模版管理</h2>
    <div class="btn-box">
      <div style="float:right;">
        <el-button type="primary" size="mini" @click="$router.push({name:'addfre'})">添加运费模板</el-button>
      </div>
    </div>
    <el-table    class="freight-table" cell-class-name=" freight-detail freight-cell" :data="list" ref="tableData" v-loading.body="listLoading"
      element-loading-text="Loading" highlight-current-row>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <!-- child table start-->
          <el-table :data="scope.row.valuation_rules" ref="freRuleData">
            <el-table-column align="center" label='可配送区域' min-width="180px">
              <template slot-scope="scope">
                {{scope.row.regions_name}}
              </template>
            </el-table-column>
            <el-table-column align="center" :label="scope.row.valuation_type===3?'首件（个）':'首重（Kg）'" min-width="180px">
              <template slot-scope="scope">
                {{scope.row.first_amount}}
              </template>
            </el-table-column>
            <el-table-column align="center" label='运费（元）' min-width="180px">
              <template slot-scope="scope">
                {{scope.row.first_fee}}
              </template>
            </el-table-column>
            <el-table-column align="center" :label="scope.row.valuation_type===3?'续件（个）':'续重（Kg）'" min-width="150px">
              <template slot-scope="scope">
                {{scope.row.additional_amount}}
              </template>
            </el-table-column>
            <el-table-column align="center" label='续费（元）' min-width="150px">
              <template slot-scope="scope">
                {{scope.row.additional_fee}}
              </template>
            </el-table-column>
          </el-table>
          <!-- child table end-->
        </template>
      </el-table-column>
      <el-table-column align="left" label='模版名称' min-width="180px">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column align="center" label='最后编辑时间' min-width="150px">
        <template slot-scope="scope">
          {{scope.row.crtTime| formatDate("yyyy-MM-dd hh:mm")}}
        </template>
      </el-table-column>
      <el-table-column align="center" label='是否默认模板' min-width="60px">
        <template slot-scope="scope">
          <span class="success" v-if="scope.row.temStatus == 1">是</span>
          <span class="danger" v-else>否</span>
          <!--<span :class="{'success':scope.row.temStatus=='1'}">{{scope.row.temStatus==1?'是':'否'}}</span>-->
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="235px">
        <template slot-scope="scope">
          <el-button size="mini" :disabled="scope.row.temStatus ==1" @click="handleDefault(scope.$index, scope.row)">设为默认模板</el-button>
          <el-button size="mini" @click="$router.push({name:'addfre',query: { id: scope.row.id }})">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex"
      :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {
    getFreightList,
    delFreight,
    setFreightDefault
  } from '@/api/freight'
  export default {
    data() {
      return {
        disabledDefault: false,
        total: 0,
        listQuery: {
          pageIndex: 1,
          pageSize: 20
        },
        list: null,
        listLoading: true
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 列表加载
      fetchData() {
        // this.listQuery.pageIndex = 1
        this.listLoading = true
        // 获取金额列表
        getFreightList(this.listQuery).then(res => {
          this.list = res.data.supplierFreightList
          this.total = res.data.total
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      handleDelete(index, row) {
        const formData = {
          templateId: row.id
        }
        // 删除
        this.$confirm('确定要删除此条记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delFreight(formData).then(res => {
            this.list.splice(index, 1)
          })
        }).catch(() => {

        })
      },
      // 设置默认模板
      handleDefault(index, row) {
        const formData = {
          templateId: row.id
        }
        setFreightDefault(formData).then(res => {
          this.$message({
            message: '设置默认成功',
            type: 'success'
          })
          // 更新数据
          this.fetchData()
        })
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  @import 'src/assets/css/jx-order.scss';
  @import 'src/assets/css/sui-style.scss';
  .success {
    color: #67c23a
  }

  .danger {
    color: #f56c6c
  }

  .freight-table {
    .freight-cell {
      background: #f6f6f6;
      border-bottom: 1px solid #e5e5e5;
      &:first-child {
        border-left: 1px solid #e5e5e5;
      }
      &:last-child {
        border-right: 1px solid #e5e5e5;
      }
    }
    .el-table__expanded-cell[class*=cell] {
      padding: 0px;
      border-left: 1px solid #e5e5e5;
      border-right: 1px solid #e5e5e5;
    }
    .is-leaf{
      border-top: 1px solid #e5e5e5;  
      &:first-child {
        border-left: 1px solid #e5e5e5;
      }
      &:nth-last-child(2){
        border-right: 1px solid #e5e5e5;
      }
    }
  }

</style>
